<template>
  <a-select
    :placeholder="placeholder"
    v-model:value="modelValue"
    style="width: 100%"
    :allowClear="allowClear"
    :disabled="disabled"
  >
    <a-select-option
      :value="item.codeId"
      v-for="item in dictionaryDataList"
      :key="item.codeId"
      >{{ item.codeName }}</a-select-option
    >
  </a-select>
</template>
<script lang='ts'>
import { defineComponent, ref, toRefs, watch, Ref, onMounted } from "vue";
import { dictionaryPorps } from "./interface";
import dictionaryApi from "/@/api/org/dictionary";
export default defineComponent({
  name: "DictionarySelect",
  emits: ["update:value"],
  props: dictionaryPorps,
  setup(props, { emit }) {
    const dictionaryDataList: Ref<Array<any>> = ref([]);
    const modelValue = ref(props.value);
    watch(modelValue, (val) => {
      emit("update:value", val);
    });

    watch(
      () => props.value,
      (val) => {
        modelValue.value = val;
      }
    );

    const loadData = () => {
      const queryParam = {
        codeItemId: props.codeItemId,
        showColumns: "codeId,codeName",
      };
      dictionaryApi.list(queryParam).then((res) => {
        dictionaryDataList.value = res.data.data;
      });
    };
    onMounted(() => loadData());
    return {
      dictionaryDataList,
      modelValue,
      ...toRefs(props),
    };
  },
});
</script>
<style lang='less' scoped>
</style>